<template>
  <div class="table-container">
    <table class="data-table">
      <thead>
        <tr>
          <th class="corner-cell"></th>
          <th>本周</th>
          <th>本月</th>
          <th>本季度</th>
          <th>本年度</th>
          <th>全部</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td class="row-header">总车次</td>
          <td>{{ tableData.week.totalOrders }}</td>
          <td>{{ tableData.month.totalOrders }}</td>
          <td>{{ tableData.quarter.totalOrders }}</td>
          <td>{{ tableData.year.totalOrders }}</td>
          <td>{{ tableData.all.totalOrders }}</td>
        </tr>
        <tr>
          <td class="row-header">运输中车次</td>
          <td>{{ tableData.week.transing }}</td>
          <td>{{ tableData.month.transing }}</td>
          <td>{{ tableData.quarter.transing }}</td>
          <td>{{ tableData.year.transing }}</td>
          <td>{{ tableData.all.transing }}</td>
        </tr>
        <tr>
          <td class="row-header">异常车次</td>
          <td>{{ tableData.week.warningCount }}</td>
          <td>{{ tableData.month.warningCount }}</td>
          <td>{{ tableData.quarter.warningCount }}</td>
          <td>{{ tableData.year.warningCount }}</td>
          <td>{{ tableData.all.warningCount }}</td>
        </tr>
        <tr>
          <td class="row-header">完成车次</td>

          <td>{{ tableData.week.complete }}</td>
          <td>{{ tableData.month.complete }}</td>
          <td>{{ tableData.quarter.complete }}</td>
          <td>{{ tableData.year.complete }}</td>
          <td>{{ tableData.all.complete }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
import { acceptSolid } from "../utils/api";
export default {
  name: "DataTable",
  data() {
    return {
      tableData: {
        week: {
          totalOrders: "",
        },
      },
      companyId: "",
    };
  },
  created() {
    let userData = JSON.parse(localStorage.getItem("useroBJ"));
    this.companyId = userData.companyId;
  },
  mounted() {
    this.getData();
  },
  methods: {
    async getData() {
      const { data } = await acceptSolid(this.companyId, "entDetails");
      if (data.success) {
        this.tableData = data.data;
      } else {
        Toast(data.message);
      }
    },
  },
};
</script>

<style scoped>
.table-container {
  margin-top: 20px;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  background-color: white;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  overflow: hidden;
}

.data-table th,
.data-table td {
  padding: 12px 16px;
  text-align: center;
  border: 1px solid #e8e8e8;
  font-size: 14px;
}

.data-table th {
  background-color: #fafafa;
  font-weight: 600;
  color: #333;
  border-bottom: 2px solid #d9d9d9;
}

.corner-cell {
  background-color: #f0f0f0 !important;
  border: 1px solid #d9d9d9;
}

.row-header {
  background-color: #fafafa;
  font-weight: 600;
  color: #333;
  text-align: left;
  border-right: 2px solid #d9d9d9;
}

.data-table tbody tr:hover {
  background-color: #f5f5f5;
}

.data-table tbody tr:nth-child(even) {
  background-color: #fafafa;
}

.data-table tbody tr:nth-child(even):hover {
  background-color: #f0f0f0;
}

.data-table td {
  color: #666;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .data-table {
    font-size: 12px;
  }

  .data-table th,
  .data-table td {
    padding: 8px 12px;
  }
}
</style>
